import React from "react";
<<<<<<< HEAD
import StoTableX from "../components/StoTableX/StoTableX";
import { getStudents } from "../common/mockdata";

const students = getStudents(20);
let currentPage = 1;
const pageSize = 10;

const formatter = {
  avatar: (student: any) => (
    <a href={`/${student.id}`}>
      <img src={student.avatar} alt="" />
    </a>
  ),

  name: (student: any) => (
    <a style={{ fontWeight: "bold" }} href={`/${student.id}`}>
      {student.name}
    </a>
  ),
};

export default function TableXDemo() {
  return (
    <div>
      <h3>TableXDemo</h3>

      <StoTableX
        data={students}
        pageSize={pageSize}
        sortableKeys={["id", "name", "age", "gender", "score"]}
        formatter={formatter}
        currentPage={currentPage}
      ></StoTableX>
      
=======
import StoTableX from "../components/StoTableX";

import { getStudents } from "../common/mockdata";
const students = getStudents(20, true);

const formatters = {
  name: (key: string, item: any) => <a href={`/${item.id}`}>{item[key]}</a>,
  avatar: (key: string, item: any) => (
    <a href={`/${item.id}`}>
      <img style={{ width: 40 }} src={`${item[key]}`} alt="" />
    </a>
  ),
};

const onSelectedItemsChanged = (items: Set<Record<string, any>>) => {
  console.log("onSelectedItemsChanged", items);
};

/* 组合组件：自带筛选器和分页器的超级表格 */
export default function TableXDemo() {
  return (
    <div>
      TableXDemo
      <StoTableX
        data={students}
        // width={800}
        formatters={formatters}
        sortables={Object.keys(students[0])}
        pageSize={10}
        onSelectedItemsChanged={onSelectedItemsChanged}></StoTableX>
>>>>>>> dev-rollup
    </div>
  );
}
